<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">角色管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-button @click="add" type="primary" plain size="small">添加</el-button>
    <v-list @edit="edit"></v-list>
    <v-dialog @cancel="cancel" ref="dialogInfo" :addInfo="addInfo"></v-dialog>
  </div>
</template>

<script setup lang="ts">
import vList from "./list.vue";
import vDialog from "./dialog.vue";
import { reactive, ref } from "vue";
let addInfo = reactive({
  isShow: false,
  isAdd: true,
});
let dialogInfo = ref();
let add = () => {
  (addInfo.isShow = true), (addInfo.isAdd = true);
};
let cancel = (e: any): void => {
  addInfo.isShow = e;
};
let edit = (e: any): void => {
  addInfo.isShow = true;
  addInfo.isAdd = false;
  dialogInfo.value.lookup(e);
};
</script>

<style scoped>
.el-button {
  margin: 10px 5px;
}
</style>